<template>
  <div>


    <div style="height:100%;overflow-y:scroll;overflow-x:hidden">
      <ul class="menu_top_list clear">

        <li @click="back()">

          <span class="iconfont icon-fanhui"></span>

        </li>

        <!-- <li>返回</li> -->

        <li>
          {{ this.rbq && this.rbq.title }}
        </li>
        <li class="index-btn" @click="add()">
        </li>


      </ul>

      <iframe id="iframeA" :src="this.rbq && this.rbq.start" frameborder="0" scrolling="no">

      </iframe>

    </div>
  </div>
</template>

<script>
import { allGame } from '@/api/home';

export default {
  data() {
    return {

      con: null,
      obj: [],
      list: [],
      rbq: null,
      bbc: null,

    };
  },
  methods: {
    back() {
      this.$router.go(-1)

    },
    add() {
      this.$router.push('home')
      // console.log(this.$route.query);


    },
    allGameFun() {
      allGame({ id: this.$route.query.id }).then(data => {
        let arr = data.data

        const map = new Map()

        this.qc = arr.filter(key => !map.has(key.id) && map.set(key.id, 1)) // 这里对name属性进行去重

        //   console.log(qc)

        // console.log("qc=>", this.qc)

        // console.log(arr);

        let index = this.qc.findIndex(item => item.id == this.$route.query.id);

        // this.obj = this.qc.splice(index, 1);//删除数组

        this.rbq = this.qc[index]










      })

    }

  },
  created() {
    // 获取id
    if ("id" in this.$route.query) {
      this.allGameFun()
      console.log(this.$route.query);

    }

  }

}
</script>

<style lang="scss" scoped>
#iframeA {
  // position: absolute;
  position: fixed;
  transform: scale(.5, .5) translate(-50%, -50%);
  width: 200%;
  height: 200%;
  top: 48px;
  left: 0
}

.menu_top_list {
  position: fixed;
  height: 48px;
  width: 100%;
  background-color: white;
  color: #333;
  font-size: 16.405px;
  z-index: 90;
}

@media screen and (min-width:1100px) {
  .menu_top_list {
    position: fixed;
    height: 48px;
    width: 50%;
    background-color: white;
    color: #333;
    font-size: 16.405px;
    z-index: 90;
    margin: 0 auto;
  }
}


.index-btn {
  background: url("https://h.4399.com/images/2022/backindex_icon.png") no-repeat -9px 0;
  background-size: 28px;
  width: 40px;
  height: 38px;
  right: 0;
  background-position: 5px 14px;
  cursor: pointer;
}

.menu_top_list {
  max-width: 500px;
  margin: 0 auto;
  position: fixed;
  height: 48px;
  width: 100%;
  background-color: white;
  color: #333;
  font-size: 16px;
  font-weight: bold;

  z-index: 90;
  top: 0;
}

.menu_top_list li+li {
  width: 64%;
  -webkit-box-pack: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.menu_top_list li {
  float: left;
  display: -webkit-box;
  -webkit-box-align: center;
  height: 48px;
}

.menu_top_list li:first-child {
  cursor: pointer;
  width: 18%;
  color: #BFBFBF;
  font-size: 20px
}

.menu_top_list li:last-child {
  width: 18%;
}

.menu_top_list li:first-child::before {
  background: url("https://rs.sfacg.com/web/m/images/menu_top_icon.png") no-repeat -49.216px 9.96px;
  background-size: 105.462px;
  content: "";
  height: 46.8px;
  width: 24.608px;
  display: block;
}
</style>